<template>
  <div class="timely-rate">
    <div class="search-header">
      <el-date-picker
        v-model="queryParams.beginDate"
        size="mini"
        value-format="yyyy-MM-dd"
        type="date"
        placeholder="开始日期"
        style="width: 180px;margin-right: 20px;"
      />
      <el-date-picker
        v-model="queryParams.endDate"
        size="mini"
        value-format="yyyy-MM-dd"
        type="date"
        style="width: 180px;"
        placeholder="结束日期"
        :picker-options="pickerOptionsEnd"
      />
      <el-checkbox v-model="queryParams.haveOld" true-label="1" false-label="0" style="margin-left: 10px;" label="旧工序" border size="mini" />
      <div class="oprate-btn">
        <el-button size="mini" type="primary" icon="el-icon-search" @click="dataChange">查询</el-button>
        <el-button size="mini" type="primary" :disabled="loading" icon="el-icon-download" :loading="fileLoading" @click="downloadFile">下载</el-button>
      </div>
    </div>
    <el-table
      v-loading="loading"
      element-loading-text="拼命加载中..."
      :data="table"
      :span-method="objectSpanMethod"
      border
      size="mini"
      style="width: 100%;"
      :row-class-name="tableRowClassName"
      height="calc(100vh - 150px)"
    >
      <el-table-column
        label="事业部"
        min-width="140"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.cuname.value }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="最新项目名称"
        min-width="120"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.cflastname.value }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="精装标段"
        min-width="120"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.cfjzbdname }}</span>
        </template>
      </el-table-column>
      <el-table-column label="精装工序（批次）" align="center">
        <el-table-column prop="jzbatch" label="应验收" align="center" min-width="80" />
        <el-table-column prop="jzfinished" label="已完成验收" align="center" min-width="82" />
        <el-table-column label="未及时验收" align="center" min-width="82">
          <template slot-scope="scope">
            <div v-if="scope.row.cfjzbdname === '项目小计：'" class="no-check" @click="goNoCheck(scope.row, 2, 2)">{{ scope.row.jznotimelyfinished }}</div>
            <div v-else>{{ scope.row.jznotimelyfinished }}</div>
          </template>
        </el-table-column>
        <el-table-column label="未完成验收" align="center" min-width="82">
          <template slot-scope="scope">
            <div v-if="scope.row.cfjzbdname === '项目小计：'" class="no-check" @click="goNoCheck(scope.row, 3, 2)">{{ scope.row.jznofinished }}</div>
            <div v-else>{{ scope.row.jznofinished }}</div>
          </template>
        </el-table-column>
        <el-table-column label="验收率" align="center" min-width="80">
          <template slot-scope="scope">
            <span>{{ scope.row.jzfinishedrate | rate }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="jztimelyRate" label="及时验收率" align="center" min-width="82">
          <template slot-scope="scope">
            <span>{{ scope.row.jztimelyfinishedrate | rate }}</span>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getJzKeyTimelyRate, downloadKeyTimelyRate } from '@/api/statement/keyProcessCheck'
import { parseTime } from '@/utils/common'
export default {
  name: 'TimelyRateHardback',
  filters: {
    rate(val) {
      if (val !== undefined) {
        let rval = ''
        rval = (val * 100).toFixed(2)
        return rval + '%'
      }
    }
  },
  data() {
    return {
      dateRangeValue: [],
      table: [],
      loading: false,
      fileLoading: false,
      queryParams: {
        beginDate: '',
        endDate: '',
        reportType: 4,
        haveOld: 0
      },
      dataSourceKey: '',
      pickerOptionsEnd: {
        disabledDate: (time) => {
          return time.getTime() < new Date(this.queryParams.beginDate).getTime()
        }
      }
    }
  },
  created() {
    const today = parseTime(new Date(), '{y}-{m}-{d}')
    const preDate = parseTime(new Date().setMonth((new Date().getMonth() - 3)), '{y}-{m}-{d}')
    this.queryParams.beginDate = preDate
    this.queryParams.endDate = today
    this.dateRangeValue = [preDate, today]
    // this.init()
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (row.cfjzbdname === '项目小计：') {
        return 'sum-row'
      }
      return ''
    },
    goNoCheck(row, reportType, type) {
      if (reportType === 2) { // 未及时验收
        if (row.jznotimelyfinished === 0) {
          this.$message.success('暂无 精装未及时验收数据')
          return
        }
        this.$router.push({ path: '/statement/NoTimely', query: { projectId: row.prjid, type: type, beginDate: this.queryParams.beginDate, endDate: this.queryParams.endDate, haveOld: this.queryParams.haveOld }})
      } else { // 未完成验收
        if (row.jznofinished === 0) {
          this.$message.success('暂无 精装未完成验收数据')
          return
        }
        this.$router.push({ path: '/statement/NoFinished', query: { projectId: row.prjid, type: type, beginDate: this.queryParams.beginDate, endDate: this.queryParams.endDate, haveOld: this.queryParams.haveOld }})
      }
    },
    init() {
      if (!this.queryParams.beginDate || !this.queryParams.endDate) {
        this.$message.warning('开始时间和结束时间不能为空.')
        return
      }
      this.loading = true
      getJzKeyTimelyRate(this.queryParams).then(
        (response) => {
          if (response.code === 200) {
            this.table = response.data
            this.dataSourceKey = response.msg
          }
        }
      ).finally(() => {
        setTimeout(() => {
          this.loading = false
        }, 200)
      })
    },
    // 下载文件
    downloadFile() {
      this.fileLoading = true
      downloadKeyTimelyRate({ ...this.queryParams, dataSourceKey: this.dataSourceKey }).then(file => {
        var elink = document.createElement('a')
        var blob = new Blob([file])
        elink.download = '工程协同精装标段关键工序验收及时率统计.xlsx'
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob)
        elink.click()
      }).finally(() => {
        this.fileLoading = false
      })
    },
    dataChange() {
      this.dataSourceKey = ''
      this.init()
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        return {
          rowspan: row.cuname.rowspan,
          colspan: 1
        }
      } else if (columnIndex === 1) {
        return {
          rowspan: row.cflastname.rowspan,
          colspan: 1
        }
      }
    }
  }
}
</script>
<style scoped lang="scss">
  .timely-rate {
    padding: 0 20px;
    .search-header{
      margin: 10px 0;
      .oprate-btn {
        display: inline-block;
        margin-left: 50px;
      }
    }
    .no-check {
      color: #409EFF;
      text-decoration: underline;
      cursor: pointer;
    }
  }
</style>
<style lang="scss">
  .sum-row {
    background-color: #f0f9eb !important;
  }
</style>
